<template>
    <el-dialog
        
        :model-value="dialogVisible"
        width="650px"
        :align-center="true"
        @close="cancel"
        @open="open_dialog"
        class="dialog__file_all"
        :destroy-on-close="true"
    >
    <div class="dialog__file__body">
        
        <div class="file__list">
            <div class="file__body__title">文件列表</div>
            <div  v-for="item,index  in data_list">
                <div class="file__row" @click="click_select_file(item)">
                    <div class="file__name" :title="item.name">{{ item.name }}</div>
                    <div class="file__oper">
                        <div class="file__state">{{ process_state_obj[String(item.process_state)] }}</div>
                        <div class="file__del"><span><svg-icon name="icon-shanchu" :size="15"></svg-icon></span></div>
                    </div>
                    

                </div>
            </div>
            
            <div class="bottom__page" v-show="total>pageSize">
                <el-pagination
                    v-model:current-page="currentPage"
                    v-model:page-size="pageSize"
                    :background="false"
                    layout="prev, pager, next"
                    
                    :total="total"
                    @current-change="handleCurrentChange"
                />  

            </div>

        </div>

        
        <div class="select__file__body">
            <div class="file__body__title">选择列表</div>
            <div class="select__file__list">
                <div  class="select__file__content">
                    <div class="select__file" :title="item.name" v-for="item, index in select_file_list" @click="click_del_select_file(item)">
                        {{ item.name }}
                    </div>
                </div>
                

            </div>
        </div>

    </div>
        
    <div class="dialog__file__footer">

        <div class="left__btns">
            <div class="upload__btn btn">
                <el-upload 
                ref="upload_ins" action="#" :auto-upload="false" :show-file-list="false" :limit="1" :on-change="handleFileChange"
                >上传</el-upload>
            </div>
            <div class="process__btn btn" @click="process_file">
                处理文件
            </div>
            <div class="tips">
                Tips: 点击文件即可选择与删除(未处理的文件将不参与检索)
            </div>
        </div>
        <div class="right__btns">
            <div class="confirm__btn btn" @click="confirm">
                确认
            </div>
        </div>

    </div>



    </el-dialog>
</template>
           
<script setup>
    import { ref, onMounted, nextTick, watch, watchEffect, reactive , defineEmits, defineProps } from 'vue'
    import { uploadRAGFile, getRAGFile, processRAGFile } from '@/api/homeApi.js'
    import MessageBox from '@/utils/MessageBox';

    const props = defineProps(['visible', "bg_image_url", "mask_url"])
    const emit = defineEmits(['cancel', 'confirm'])
    


    const dialogVisible = ref(props.visible)

    const upload_ins = ref(null)
    const data_list = ref([])
    const total = ref(0)
    const currentPage = ref(1)
    const pageSize = ref(6)

    const process_state_obj = ref({
        '1': '未处理',
        '2': '处理中',
        '3': '已完成',
        '-1': '失败'
    })

    const select_file_list = ref([])
    

    watch(() => props.visible, (value) => {
        if (value){
            dialogVisible.value = true
        }else{
            emit('cancel')
            dialogVisible.value = false
        }
        // value && (dialogVisible.value = true)
    })


    onMounted(()=>{        
        
    })

    const clear__file_list = ()=>{
        select_file_list.value = []
    }

    const click_select_file= (item)=>{

        // console.log('add item', select_file_list.value)
        var li = select_file_list.value.filter((it)=>it.id==item.id)
        if (li.length < 1){
            // console.log('add item', item)
            select_file_list.value.push(item)
        }
        
    }

    const click_del_select_file = (item)=>{
        select_file_list.value.splice(select_file_list.value.indexOf(item), 1)
    }

    // 处理文件
    const process_file = async ()=>{

        var req_id = select_file_list.value.map((item)=>item.id)
        // console.log(req_id)
        var req_data = {
            id: req_id
        }
        await processRAGFile(req_data)

        MessageBox.success('处理中...')
    }

    const open_dialog = ()=>{
        getFileList()       
    }
    const handleCurrentChange = (newPage)=>{
        currentPage.value = newPage
        getFileList()
    }

    const handleFileChange = async (file, filelist)=>{

        // console.log(file)

        if (file.size / 1024 / 1024 > 10) {
            MessageBox.error('请上传小于10MB的文件')
            upload_ins.value.clearFiles()
            return false
        }
        
        
        // URL.createObjectURL(file.raw)

        var formdata = new FormData()
        formdata.append('file', file.raw)
        var res = await uploadRAGFile(formdata)

        MessageBox.success('上传成功')
        getFileList()
        upload_ins.value.clearFiles()

    }

    const getFileList = async ()=>{
        var req_data = {
            page: currentPage.value,
            page_size: pageSize.value
        }

        var res = await getRAGFile(req_data)
        data_list.value = res.data.list
        total.value = res.data.total
    }
    

    function cancel(){
        emit('cancel')
        
    }

    function confirm(){

        var data = select_file_list.value.slice(0, 10).map((it)=>it.id)
        
        emit('confirm', data)
    }

    defineExpose({clear__file_list})
    
</script>
<style scoped lang="scss">
.dialog__file_all{
    padding: 0;

    .dialog__file__body{
        height: 300px;
        width: 100%;
        display: flex;
        .file__list{
            width: 400px;
            border: solid 1px var(--wchime-color-border);
            display: flex;
            flex-direction: column;
            padding: 5px 20px 10px 20px;
            .file__body__title{
                font-size: 10px;
            }
            .file__row{
                display: flex;
                flex-direction: row;
                width: 100%;
                height: 40px;
                padding: 0 10px;
                align-items: center;
                border-bottom: 1px solid var(--wchime-color-border);
                user-select: none;
                .file__name{
                    width: calc(100% - 100px);
                    text-align: left;
                    white-space: nowrap;   // 防止文本换行
                    overflow: hidden;      // 隐藏溢出的文本
                    text-overflow: ellipsis; // 显示省略号
                }

                .file__oper{
                    display: flex;
                    flex-direction: row;
                    width: 100px;
                    justify-content: space-around;
                    .file__del:hover{
                        color: rgb(255, 0, 0);
                    }
                }
            }
            .file__row:hover{
                background-color: var(--wchime-color-hover);
            }

            .bottom__page{
                width: 100%;
                display: flex;
                justify-content: center;
                // margin-top: 10px;
            }
        }
        .select__file__body{
            height: 100%;
            width: calc(100% - 400px);
            border: solid 1px var(--wchime-color-border);
            padding: 5px 0px 10px 5px;
            .file__body__title{
                font-size: 10px;
                height: 15px;
            }
            .select__file__list{
                height: calc(100% - 15px);
                overflow-y: auto;
                
                .select__file__content{
                   
                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: row;
                    justify-content: start;
                    gap: 10px;
                    .select__file{
                        user-select: none;
                        max-width: 100%;
                        height: 32px;
                        
                        
                        padding: 5px;
                        border: solid 1px var(--wchime-color-border);
                        border-radius: 5px;
                        white-space: nowrap;   // 防止文本换行
                        overflow: hidden;      // 隐藏溢出的文本
                        text-overflow: ellipsis; // 显示省略号
                        
                    }
                    .select__file:hover{
                        background-color: var(--wchime-color-hover);
                    }
                }
                

            }
        }
    }
    .dialog__file__footer{
        margin-top: 10px;
        width: 100%;
        height: 40px;
        display: flex;
        justify-content:space-between;
        align-items: center;
        .left__btns{
            display: flex;
            gap: 10px;
            .upload__btn{
                background-color: rgb(40, 198, 37)
            }
            .process__btn{
                background-color: rgb(235 182 17);
                width: 80px;
            }
            .tips{
                font-size: 9px;
                display: flex;
                align-items: center;
            }
        }
        .right__btns{
            .confirm__btn{
background-color: #09f;
            }
            
        }
        .btn{
            width: 60px;
            height: 40px;
            border-radius: 20px;
            background-color: rgb(215, 213, 210);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            color: #fff;
        }
    }
}
   
</style>


